<template>
  <div class="title-preview">
    <!-- 第一部分 -->
    <el-row :gutter="20" class="one_row">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【题型】：
          <span v-if="detailList.questionType == 1">单选</span>
          <span v-else-if="detailList.questionType == 2">多选</span>
          <span v-else>简答</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【编号】：{{ detailList.id }}
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple">
          【难度】：
          <span v-if="detailList.difficulty == 1">简单</span>
          <span v-else-if="detailList.difficulty == 2">一般</span>
          <span v-else>困难</span>
        </div></el-col
      >
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          【标签】：{{ detailList.tags }}
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【学科】：{{ detailList.subjectName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【目录】：{{ detailList.directoryName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【方向】：{{ detailList.direction }}
        </div></el-col
      >
    </el-row>
    <hr class="magin_top_bottom" />

    <!-- 题干 -->
    <el-row :gutter="20">
      <el-col>
        <el-row>
          <div class="grid-content bg-purple">
            【题干】：
            <span class="detail_title" v-html="detailList.question"></span>
          </div>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="padding:8px 0">
      <el-col :span="2">
        <span v-if="detailList.questionType == 1">单选题</span>
        <span v-else-if="detailList.questionType == 2">多选题</span>
        <span v-else>简答题</span>
      </el-col>

      <el-col :span="22">
        选项：（以下选中的选项为正确答案）
      </el-col>
    </el-row>
    <el-row>
      <el-row v-if="detailList.questionType == 1">
        <!-- 单选题 -->
        <div v-for="item in detailList.options" :key="item.code">
          <el-radio :value="item.isRight" :label="1" style="padding:8px 0">{{
            item.title
          }}</el-radio>
        </div>
      </el-row>

      <!-- 多选题选题 -->
      <el-row v-if="detailList.questionType == 2">
        <div
          v-for="item in detailList.options"
          :key="item.code"
          style="padding:8px 0"
        >
          <el-checkbox :value="item.isRight === 1 ? true : false">{{
            item.title
          }}</el-checkbox>
        </div>
      </el-row>
      <el-row> </el-row>
    </el-row>
    <hr class="magin_top_bottom" />

    <!-- 参考答案 -->
    <el-row :gutter="20" class="answer_video">
      <el-col>
        <el-row>
          <div class="grid-content bg-purple">
            <span>【参考答案】：</span>
            <el-button type="danger" size="small" @click="showViedo"
              >视频答案预览</el-button
            >
          </div>
          <video
            :src="detailList.videoURL"
            class="detail_video"
            controls
            v-if="play"
            autoplay="autoplay"
            ref="viedoView"
          ></video>
        </el-row>
        <el-row></el-row>
      </el-col>
    </el-row>
    <hr class="magin_top_bottom" />

    <!-- 答案解析 -->
    <el-row>
      <el-col>
        <el-row>
          <span>【答案解析】:</span>
          <span v-html="detailList.answer"></span>
        </el-row>
      </el-col>
    </el-row>
    <hr class="magin_top_bottom" />

    <!-- 题目备注 -->
    <el-row>
      <el-col
        >【题目备注】：<span>{{ detailList.remarks }}</span></el-col
      >
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeTitlePreview">关闭</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "TitlePreview",
  components: {},
  props: ["detailList", "showTitlePreviewDiglog"],
  data() {
    return {
      play: false
    };
  },
  methods: {
    closeTitlePreview() {
      this.$emit("showTitle", false);
      this.$refs.viedoView.pause();
    },
    showViedo() {
      this.play = true;
    }
  }
};
</script>
<style scoped>
.title-preview {
  padding: 20px;
}
.one_row {
  margin-bottom: 30px;
}
.magin_top_bottom {
  margin: 10px 0;
}
.detail_title {
  color: rgb(0, 153, 255);
  width: 100%;
}
.answer_video {
  width: 100%;
}
.detail_video {
  width: 50%;
  /* display: none; */
  margin-top: 10px;
}
.dialog-footer {
  float: right;
}
</style>
